<template>
    <view class="cu-custom">
         <view>
            <view class="flex-column-center">
                <view class="hw-128 cu-avatar radius  border-grey shadow" :style="[{backgroundImage: 'url(' + avatar + ')'}]">
                    <u-icon v-if="!avatar"  name="account-fill" color="#fff" size="128"></u-icon>
                </view>
                <view class="margin-top text-gray">预览效果</view>
            </view>
        </view>

        <view class="margin-top-xl">
            <u-scroll-list @right="right" @left="left">
                <view class="flex ">
                    <view v-for="(item, index) in list"  :key="index">
                        <view  class="margin-lr-xs cu-custom"  :class="avatarId === item.id ? 'avatar-selected': '' ">
                            <image class="hw-128 border-grey shadow radius"  :src="item.thumb"  @click="doublebSelectAvatarFn" :data-id="item.id" mode="scaleToFill" />
                            <view class="avatar-selected-mark cuIcon-check text-red text-white"></view>
                            <text >￥{{ item.price }}</text>
                        </view>
                    </view>
                </view>
            </u-scroll-list>
        </view>
    </view>
</template>
<script lang="ts" setup>
import {ref, reactive} from "vue"

const avatar = ref("https://cdn.uviewui.com/uview/goods/4.jpg")
const avatarId = ref()
const list = reactive<any>([
        { id: 1, price: '230.5', thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'}, 
        { id: 2,price: '74.1', thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'}, 
        { id: 3,price: '8457', thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'}, 
        { id: 4,price: '1442', thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'},
        { id: 5, price: '541', thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'}, 
        { id: 6,price: '234', thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'},
        { id: 7, price: '562', thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'}, 
        { id: 8,price: '251.5', thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'}
])


const left = () =>{
    	console.log('left');
}

const right = () =>{
    console.log('right');
}

// 选择某一张图
function doublebSelectAvatarFn(event: any){
   const avatarObj = list.filter((item: any) => item.id == event.currentTarget.dataset.id)[0]
   avatarId.value = avatarObj.id 
   avatar.value = avatarObj.thumb
}

</script>

<style lang="scss" scoped>
.avatar-selected .avatar-selected-mark{
       display: flex;
}

.avatar-selected-mark {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    margin: 5upx;
    display: none;
}
</style>
